﻿<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>幸福里花卉-我的账户</title>
  <meta name="robots" content="noindex, follow" />
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <!-- Favicon -->
  <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png" />

  <!-- CSS
	============================================ -->

  <!-- Bootstrap CSS -->
  <!-- <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css"> -->

  <!-- Icon Font CSS -->
  <!-- <link rel="stylesheet" href="assets/css/vendor/plazaicon.css">
    <link rel="stylesheet" href="assets/css/vendor/themify-icons.css">
    <link rel="stylesheet" href="assets/css/vendor/font-awesome.min.css"> -->

  <!-- Plugins CSS -->
  <!-- <link rel="stylesheet" href="assets/css/plugins/animate.css">
    <link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css">
    <link rel="stylesheet" href="assets/css/plugins/select2.min.css"> -->

  <!-- Helper CSS -->
  <link rel="stylesheet" href="assets/css/helper.css" />

  <!-- Main Style CSS -->
  <!-- <link rel="stylesheet" href="assets/css/style.css"> -->

  <!--====== Use the minified version files listed below for better performance and remove the files listed above ======-->
  <link rel="stylesheet" href="assets/css/plugins-min/plugins.min.css" />
  <link rel="stylesheet" href="assets/css/style.min.css" />
  <link rel="stylesheet" href="assets/css/element.css" />
</head>

<body>
  <div class="main-wrapper" id="app">
    <!--Header Section Start-->
    <div class="header-section d-none d-lg-block">
      <div class="main-header">
        <div class="container position-relative">
          <div class="row align-items-center">
            <div class="col-lg-2">
              <div class="header-logo">
                <a href="index.html"><img src="assets/images/logo/logo.png" alt="" /></a>
              </div>
            </div>
            <div class="col-lg-6 position-static">
              <div class="site-main-nav">
                <nav class="site-nav">
                  <ul>
                    <li><a href="index.html">首页</a></li>
                    <li>
                      <a href="shop-grid-4.html">鲜花 <span class="new">New</span></a>
                    </li>
                    <li>
                      <a href="about.html">公告</a>
                    </li>
                  </ul>
                </nav>
              </div>
            </div>
            <div class="col-lg-4">
              <div class="header-meta-info">
                <div class="header-account">
                  <div class="header-account-list dropdown top-link">
                    <a role="button" data-toggle="dropdown"><i class="icon-users"></i></a>
                    <ul class="dropdown-menu ">
                      <li><a href="login.html">登录</a></li>
                      <li><a href="register.html">注册</a></li>
                      <li><a href="my-account.html">我的账户</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--Header Section End-->
    <div class="overlay"></div>
    <!--Overlay-->
    <!--Page Banner Start-->
    <div id="app" class="page-banner" style="background-image: url(assets/images/testimonial-bg.jpg)">
      <div class="container">
        <div class="page-banner-content text-center">
          <h2 class="title">我的账户</h2>
          <ol class="breadcrumb justify-content-center">
            <li class="breadcrumb-item"><a href="index.html">首页</a></li>
            <li class="breadcrumb-item active" aria-current="page">
              我的账户
            </li>
          </ol>
        </div>
      </div>
    </div>
    <!--Page Banner End-->

    <!--My Account Start-->
    <div class="register-page section-padding-5">
      <div class="container">
        <div class="row">
          <div class="col-xl-3 col-md-4">
            <div class="my-account-menu mt-30">
              <ul class="nav account-menu-list flex-column">
                <li>
                  <a class="active" data-toggle="pill" href="#pills-order"><i class="fa fa-shopping-cart"></i> 订单</a>
                </li>
                <li>
                  <a data-toggle="pill" href="#pills-payment"><i class="fa fa-credit-card"></i> 钱包</a>
                </li>
                <li>
                  <a data-toggle="pill" href="#pills-address"><i class="fa fa-map-marker"></i> 收货地址</a>
                </li>
                <li>
                  <a data-toggle="pill" href="#pills-account"><i class="fa fa-user"></i> 账户详情</a>
                </li>
                <li>
                  <a data-toggle="pill" href="#pills-convert"><i class="fa fa-star"></i> 会员积分</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-xl-8 col-md-8">
            <div class="tab-content my-account-tab mt-30" id="pills-tabContent">
              <div class="tab-pane fade show active" id="pills-order">
                <div class="my-account-payment account-wrapper">
                  <h4 class="account-title">我的订单</h4>
                  <!-- <p class="mt-30">暂无订单</p> -->
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="date" label="日期" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                  </el-table>
                </div>
              </div>
              <div class="tab-pane fade" id="pills-payment">
                <div class="my-account-payment account-wrapper">
                  <h4 class="account-title">我的钱包</h4>
                  <p class="mt-30">暂无余额</p>
                </div>
              </div>
              <div class="tab-pane fade" id="pills-address">
                <div class="my-account-address account-wrapper">
                  <div class="row">
                    <div class="col-md-12">
                      <h4 class="account-title">送货地址</h4>
                      <!-- <div class="account-address mt-30">
                          <h6 class="name">收货人：皮卡丘</h6>
                          <p>详细地址：北京市朝阳区东风镇东风路1号302</p>
                          <p>手机号码：18899990000</p>
                          <a class="btn btn-primary" 
                            ><i class="fa fa-edit"></i> 编辑地址</a
                          >
                        </div> -->
                      <div class="account-details">
                        <div class="row">

                          <div class="col-md-12">
                            <div class="single-form">
                              <input type="text" placeholder="收货人">
                            </div>
                          </div>
                          <div class="col-md-12">
                            <div class="single-form">
                              <input type="text" placeholder="手机号码">
                            </div>
                          </div>
                          <div class="col-md-12">
                            <div class="single-form">
                              <input type="text" placeholder="地址">
                            </div>
                          </div>
                          <div class="col-md-6">
                            <div class="single-form">
                              <button class="btn btn-primary">编辑 </button>
                              <button class="btn btn-primary">保存</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tab-pane fade" id="pills-account">
                <div class="my-account-payment account-wrapper">
                  <h4 class="account-title">账户信息</h4>
                  <p><input placeholder="姓名" /></p>
                  <p><input placeholder="账号" /></p>
                  <p><input placeholder="邮箱" /></p>
                </div>
                <div class="col-md-6">
                  <div class="single-form">
                    <button class="btn btn-primary">编辑 </button>
                    <button class="btn btn-primary">保存</button>
                  </div>
                </div>
              </div>
              <div class="tab-pane fade" id="pills-convert">
                <div class="my-account-payment account-wrapper">
                  <h4 class="account-title">积分兑换</h4>
                  <p class="mt-30">暂无积分</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--My Account End-->

    <!--Footer Section Start-->
    <div class="footer-area">
      <div class="container">
        <div class="footer-widget-area section-padding-6">
          <div class="row justify-content-between">

            <!--Footer Widget Start-->
            <div class="col-lg-4 col-md-6">
              <div class="footer-widget">
                <img src="assets/images/logo/logo.png" alt="" style="width: 230px;height: 120px;">
                <!--  -->
              </div>
              <!--Footer Widget End-->
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="footer-widget">
                <h4 class="footer-widget-title">信息</h4>
                <div class="footer-widget-menu">
                  <ul>
                    <li><a></a></li>
                    <li><a></a></li>
                    <li><a>常见问题</a></li>
                    <li><a>商店地址</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="footer-widget">
                <h4 class="footer-widget-title">账户</h4>

                <div class="footer-widget-menu">
                  <ul>
                    <li><a>法律声明</a></li>
                    <li><a>安全条款</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="footer-widget">
                <h4 class="footer-widget-title">帮助</h4>

                <div class="footer-widget-menu">
                  <ul>
                    <li><a>常见问题</a></li>
                    <li><a>定价方案</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
              <div class="footer-widget">
                <h4 class="footer-widget-title">顾客服务</h4>
                <div class="footer-widget-menu">
                  <ul>
                    <li><a>我的账户</a></li>
                    <li><a>使用条款</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--Footer Section End-->

    <!--Back To Start-->
    <a class="back-to-top">
      <i class="fa fa-angle-double-up"></i>
    </a>
    <!--Back To End-->
  </div>

  <!-- JS
    ============================================ -->

  <!-- Modernizer JS -->
  <script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
  <!-- jQuery JS -->
  <script src="assets/js/vendor/jquery-3.3.1.min.js"></script>
  <!-- Bootstrap JS -->
  <!-- <script src="assets/js/vendor/popper.min.js"></script>
    <script src="assets/js/vendor/bootstrap.min.js"></script> -->

  <!-- Plugins JS -->
  <!-- <script src="assets/js/plugins/swiper-bundle.min.js"></script>
    <script src="assets/js/plugins/jquery.countdown.min.js"></script>
    <script src="assets/js/plugins/jquery.elevateZoom.min.js"></script>
    <script src="assets/js/plugins/select2.min.js"></script> -->

  <!--====== Use the minified version files listed below for better performance and remove the files listed above ======-->
  <script src="assets/js/plugins.min.js"></script>

  <!-- Main JS -->
  <script src="assets/js/main.js"></script>

  <!-- Google Map js -->

  <script src="assets/js/map-script.js"></script>
  <script src="assets/js/lib/vue.js"></script>
  <script src="assets/js/lib/index.js"></script>
  <script src="assets/js/lib/axios.min.js"></script>

  <script type="module">
    const vm = new Vue({
      // 配置对象 options
      // 配置选项(option)
      el: "#app", // element: 指定用vue来管理页面中的哪个标签区域
      data() {
        let validateMobile = (rule, value, callback) => {
          if (!value) {
            return callback(new Error("手机号码不能为空"));
          } else {
            if (!regex.testMobileNo(value)) {
              callback(new Error("手机号码格式不正确"));
            }
          }
          callback();
        };
        return {
          tableData: [
            {
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄"
            },
            {
              date: "2016-05-04",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄"
            },
            {
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄"
            },
            {
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄"
            }
          ]
        };
      }
    });
  </script>
</body>

</html>